<template>
  <div class="app-container">
    <!-- <div class="filter-container">
      <el-button
        class="filter-item"
        v-if="~accessable.indexOf('manage:ad_add')"
        type="primary"
        v-waves
        icon="el-icon-plus"
        @click="handleUpdate(null)"
      >添加</el-button>
      <el-input
        @keyup.enter.native="handleFilter"
        style="width: 200px;"
        class="filter-item"
        placeholder="广告名称"
        v-model="filters.like$title"
      ></el-input>
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        class="filter-item"
        type="primary"
        v-if="~accessable.indexOf('manage:ad_export')"
        v-waves
        icon="el-icon-document"
        @click="exportExcelFile"
      >导出</el-button>
    </div>-->
    <el-table
      :data="list"
      :height="tableHeight"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="id" align="center" label="Id" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      
      <el-table-column prop="subjectName" align="center" label="广告名称" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.subjectName}}</span>
        </template>
      </el-table-column>

    <el-table-column width="140" prop="type" align="center" label="所属分类">
        <template slot-scope="scope">
          <span>{{scope.row.type | typeBanner}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="coverImg" align="center" label="广告图片" width="150">
        <template slot-scope="scope">
          <img :src="scope.row.coverImg|absUrl" alt class="img-src" />
        </template>
      </el-table-column>
      
      <el-table-column prop="sort" align="center" label="顺序编号" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.sort}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="url" align="center" label="跳转地址" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.url}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="status" align="center" label="状态" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.status | statusFilter}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200" class-name="small-padding">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="editRow(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
      <el-form
        class="dialog-form"
        :rules="rules"
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="120px"
      >
        <el-form-item label="广告名称" prop="subjectName">
          <el-input v-model="temp.subjectName" maxlength="50" placeholder="广告名称"  style="width:300px;"></el-input>
        </el-form-item>

        <el-form-item label="链接" prop="url">
          <el-input v-model="temp.url" placeholder="链接" style="width:500px;"></el-input>
        </el-form-item>

         <el-form-item label="排序" prop="sort">
          <el-input-number v-model="temp.sort" placeholder="排序"></el-input-number>
        </el-form-item>

        <el-form-item label="类型" prop="type">
          <el-select v-model="temp.type" placeholder="请选择">
            <el-option v-for="(item,value) in typeFilter" :key="value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="发布状态" prop="status">
          <el-radio-group v-model="temp.status">
            <el-radio
              v-for="(item,value) in statusFilter"
              :key="value"
              :label="value"
              :value="value"
            >{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="图片" prop="coverImg">
          <el-upload
            class="avatar-uploader"
            :action="UPLOAD_URL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess('coverImg')"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="temp.coverImg" :src="temp.coverImg|absUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
let statusFilter = ["上线", "下线"];
let statustagFilter = ["success", "danger", "info", "warning"];
let adPositiontagFilter = ["success", "danger", "info", "warning"];
let typeBanner = ['App轮播banner', '微信轮播banner','首页banner']
export default {
  data() {
    return {
      tableHeight: 400,
      total: 0,
      list:[],
      typeFilter: [
        {
          label: 'App轮播banner',
          value: 0
        },
        {
          label: '微信轮播banner',
          value: 1
        },
        {
          label: '首页banner',
          value: 2
        }
      ],
      temp: {
        title: "",
        subjectName:"",
        url:"",
        type:"",
        sort: "",
        status: "",
        coverImg: "",
      },
      pickerOptions1: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      statusFilter: statusFilter,
      typeBanner:typeBanner,
      cityIdOptions: [],
      rules: {
        subjectName: [
          {
            required: true,
            message: "广告名称不能为空",
            trigger: "change"
          }
        ],
        sort: [
          {
            required: true,
            message: "排序不能为空",
            trigger: "change"
          }
        ],
        url: [
          {
            required: true,
            message: "链接不能为空",
            trigger: "change"
          }
        ],
        type: [
          {
            required: true,
            message: "类型不能为空",
            trigger: "change"
          }
        ],
        status: [
          {
            required: true,
            message: "请选中发布状态",
            trigger: "change"
          }
        ],
        coverImg: [
          {
            required: true,
            message: "请上传图片",
            trigger: "change"
          }
        ],
      }
    };
  },
  created() {
    this.loadData();
    this.tableHeight = window.innerHeight - 300;
  },
  filters: {
    statusFilter(status) {
      return statusFilter[parseInt(status)];
    },
    typeBanner(status) {
      return typeBanner[parseInt(status)];
    },
    statustagFilter(status) {
      return statustagFilter[parseInt(status)];
    },
    adPositiontagFilter(status) {
      return adPositiontagFilter[parseInt(status)];
    }
  },
  methods: {
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.loadData();
    },
    handleCurrentChange(page) {
      this.params.pageNo = page;
      this.loadData();
    },
    handleDelete (row) {
      this.$confirm('确定删除该广告吗?', '提示').then(_ => {
        this.$post('/admin/cms_subject/delete', {
          id: row.id
        }).then(data => {
          this.loadData()
        })
      })
    },
    editRow(row) {
      this.dialogFormVisible = true
      this.isEditing = true
      this.temp = Object.assign({}, row)
    },
      submitFormAction () { 
        this.$refs['dataForm'].validate(valid => {
            if (valid) {
            this.submiting = true
            const postData = Object.assign({}, this.temp)
            let url = ''
            if (this.isEditing) {
                url = '/admin/cms_subject/modify'
            }
            this.$post(url, postData)
                .then(data => {
                this.loadData()
                this.$$notify('操作成功')
                this.dialogFormVisible = false
                this.temp={}
                })
                .finally(_ => {
                this.submiting = false
                })
            }
        })
    },
    loadData() {
      this.$post("/admin/cms_subject/list", this.params)
        .then(data => {
            this.list = data.dataList;
        })
        .catch(_ => {
          console.log("Err", _);
        });
    }
  }
};
</script>

<style scoped>
.avatar-uploader {
  width: 375px;
  height: 155px;
}

.avatar-uploader >>> .avatar {
  width: 375px;
  height: 155px;
}

.avatar-uploader >>> .avatar-uploader-icon {
  width: 375px;
  height: 155px;
}
.img-src {
  height: 100px;
}
</style>
